﻿
<!DOCTYPE html>
<html lang="zh-cn" style="font-size: 100px;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>泡泡IM</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="generator" content="generator_to_replace">
    <link href="/static/h5/css/swiper-3.4.1.min.css" rel="stylesheet" type="text/css">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="/static/h5/css/h5.css">
</head>
<body>
    <!-- 欢迎画面 -->
    <div id="welcome" class="pop__panel pop__clearfix pop__welcome" style="display: none;"><div class="pop__main-page pop__flexbox"><div class="pop__center"><img src="/static/h5/img/logo.jpg"></div></div></div>

    <!-- 泡泡IM主容器 -->
    <div class="pop__panel pop__clearfix">
        <div id="home" class="pop__main-page pop__flexbox">
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <em class="pop__placeholder"></em><h2 class="pop__header-title pop__flex1">
                        <i class="pop__loading pop__loading-head" style="display: none;"></i>聊天消息
                    </h2><em class="pop__placeholder"></em>
                </div>
            </div>
            <div class="pop__body">
                <div class="pop__scrolling-panel">
                    <div class="pop__chatting-list">
                        <div class="pop__warning-tip" style="display: none;">
                            <i class="pop__loading" style="display: none;"></i>
                        </div>
                        <div class="pop__tip" style="display: none;">没有消息</div>
                        <ul class="pop__clearfix">
                            <li routeurl="/im/h5/friend/chat/380" class="pop__flexbox pop__cell" style="transform: translate3d(0rem, 0px, 0px);">
                                <div class="pop__avatar">
                                    <img src="/static/avatar.jpg"><!---->
                                </div> <div class="pop__chatting-info"><h2 class="pop__chatting-title pop__clamp1">wh2007</h2> <p class="pop__chatting-content pop__clamp1">111</p></div> <span value="1573698886" class="pop__time">3天前</span> <div class="pop__chatting-delete pop__flexbox">删除</div>
                            </li>
                            <li routeurl="/im/h5/friend/chat/133" class="pop__flexbox pop__cell" style="transform: translate3d(0rem, 0px, 0px);">
                            <div class="pop__avatar"><img src="//demo.popoim.cn/upload/images/315dbad9897f8a.png"><!----></div> 
                            <div class="pop__chatting-info"><h2 class="pop__chatting-title pop__clamp1">测试好友</h2>
                                 <p class="pop__chatting-content pop__clamp1">[表情]</p></div> <span value="1573458450" class="pop__time">6天前</span> 
                            <div class="pop__chatting-delete pop__flexbox">删除</div></li>
                        </ul>
                    </div>
                </div>
            </div> 
            <div class="pop__body" style="display: none;">
                <div class="pop__scrolling-panel">
                    <div class="pop__friend-list">
                        <div class="pop__warning-tip" style="display: none;">

                        </div> <ul class="pop__clearfix">
                            <li><div routeurl="/im/h5/friend/search" class="pop__row pop__flexbox pop__flex-align-center pop__cell" style=""><img src="/static/h5/img/icon__add-friend.png" class="pop__avatar-small"><span class="pop__flex1">新的好友</span><label><!----></label></div> <div routeurl="/im/h5/group/list" class="pop__row pop__flexbox pop__flex-align-center pop__cell"><img src="/static/h5/img/icon__groups.png" class="pop__avatar-small"><span class="pop__flex1">群聊</span></div> </li>
                        </ul> <i class="pop__loading" style="display: none;"></i>
                    </div>
                </div> <div class="pop__friend-list-showletter">A</div> <div class="pop__friend-list-floatletter"><em>A</em><em>B</em><em>C</em><em>D</em><em>E</em><em>F</em><em>G</em><em>H</em><em>I</em><em>J</em><em>K</em><em>L</em><em>M</em><em>N</em><em>O</em><em>P</em><em>Q</em><em>R</em><em>S</em><em>T</em><em>U</em><em>V</em><em>W</em><em>X</em><em>Y</em><em>Z</em><em>#</em></div>
            </div> 
            <div class="pop__body" style="display: none;">
                <div class="pop__scrolling-panel">
                    <div class="pop__explore-list">
                        <div class="pop__warning-tip" style="display: none;">

                        </div> <ul class="pop__clearfix"><li><div class="pop__explore-list-item pop__flexbox pop__flex-align-center pop__cell"><div class="pop__icon layui-icon"></div><span class="pop__flex1">看一看</span><div class="pop__arr"></div></div></li> <li><div class="pop__explore-list-item pop__flexbox pop__flex-align-center pop__cell"><div class="pop__icon layui-icon"></div><span class="pop__flex1">搜一搜</span><div class="pop__arr"></div></div></li></ul>
                    </div>
                </div>
            </div> 
            <div class="pop__body" style="display: none;">
                <div class="pop__scrolling-panel">
                    <div class="pop__mine-info-list">
                        <div class="pop__warning-tip" style="display: none;">

                        </div> <ul class="pop__clearfix"><li><div routeurl="/im/h5/mine/detail" class="pop__mine-info-item pop__flexbox pop__flex-align-center pop__cell"><img class="pop__avatar" src="/static/h5/img/avatar.jpg"> <span class="pop__name pop__flex1"><em>wh2006</em><i>泡泡IM号：wh2006</i></span> <div class="pop__arr"></div></div></li> <li><div routeurl="/im/h5/setting/others" class="pop__mine-info-item pop__flexbox pop__flex-align-center pop__cell"><div class="pop__icon layui-icon"></div><span class="pop__flex1">设置</span><div class="pop__arr"></div></div></li></ul>
                    </div>
                </div>
            </div> 
            <div class="pop__footer"><div class="pop__footer-wrapper pop__border-top"><ul class="pop__flexbox pop__flex-align-center"><li class="pop__flex1 pop__icon-selected"><i class="pop__ico layui-icon pop__icon-chatting"><!----></i><span>消息</span></li> <li class="pop__flex1"><i class="pop__ico layui-icon pop__icon-friends"><!----></i><span>通讯录</span></li> <li class="pop__flex1"><i class="pop__ico layui-icon pop__icon-explore"><em class="pop__badge pop__badge-dot"></em></i><span>探索</span></li> <li class="pop__flex1"><i class="pop__ico layui-icon pop__icon-mine"></i><span>我</span></li></ul></div></div>
        </div>
    </div>

    <!-- 聊天容器 -->
    <div id="chat" class="pop__panel pop__clearfix">
        <div class="pop__chat-wrapper pop__flexbox">
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a> <h2 class="pop__header-title pop__flex1 pop__clamp1">wh2007</h2>
                    <a href="https://demo.popoim.cn/im/h5/user/detail/380" class="pop__dot-more"></a>
                </div>
            </div> <div class="pop__chat-msg-panel pop__flex1">
                <div class="pop__chat-content">
                    <ul class="pop__clearfix">
                        <li class="pop__chat-msg-notice" style="display: none;"><span><i class="pop__loading"></i>加载中...</span></li>
                        <li class="pop__chat-msg-notice" style="display: none;"><span>没有更多消息</span></li>
                        <li class="pop__chat-msg-time"><span>11-11 15:51</span></li>
                        <li class="pop__chat-msg-me" type="friend" timestamp="1573458680">
                            <!---->
                            <div class="pop__chat-msg-content"><!----> <div class="pop__chat-msg-msg pop__chat-msg-text"><span>我通过了你的好友请求，我们来聊天吧</span></div></div> <span routeurl="/im/h5/user/detail/379" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span>
                        </li><!---->
                        <li class="pop__chat-msg-others" type="friend" timestamp="1573458691">
                            <span routeurl="/im/h5/user/detail/380" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span>
                            <div class="pop__chat-msg-content"><!----> <div class="pop__chat-msg-msg pop__chat-msg-text"><span>312</span></div></div> <!---->
                        </li><!---->
                        <li class="pop__chat-msg-others" type="friend" timestamp="1573458723">
                            <span routeurl="/im/h5/user/detail/380" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span>
                            <div class="pop__chat-msg-content"><!----> <div class="pop__chat-msg-msg pop__chat-msg-text"><span>11</span></div></div> <!---->
                        </li><!---->
                        <li class="pop__chat-msg-me" type="friend" timestamp="1573458739">
                            <!----> <div class="pop__chat-msg-content">
                                <!----> <div class="pop__chat-msg-msg pop__chat-msg-text"><span>aaa</span></div>
                            </div> <span routeurl="/im/h5/user/detail/379" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span>
                        </li>
                        <li class="pop__chat-msg-time"><span>11-11 15:52</span></li>
                        <li class="pop__chat-msg-me" type="friend" timestamp="1573458742">
                            <!----> <div class="pop__chat-msg-content">
                                <!----> <div class="pop__chat-msg-msg pop__chat-msg-text"><span><img class="pop__chat-msg-face" src="/static/h5/img/12.png" title="[表情12]"></span></div>
                            </div> <span routeurl="/im/h5/user/detail/379" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span>
                        </li><!---->
                        <li class="pop__chat-msg-others" type="friend" timestamp="1573458763">
                            <span routeurl="/im/h5/user/detail/380" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span>
                            <div class="pop__chat-msg-content"><!----> <div class="pop__chat-msg-msg pop__chat-msg-text"><span>222</span></div></div> <!---->
                        </li><!---->
                        <li class="pop__chat-msg-others" type="friend" timestamp="1573458791">
                            <span routeurl="/im/h5/user/detail/380" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span>
                            <div class="pop__chat-msg-content"><!----> <div class="pop__chat-msg-msg pop__chat-msg-text"><span>333</span></div></div> <!---->
                        </li>
                        <li class="pop__chat-msg-time"><span>11-11 15:54</span></li>
                        <li class="pop__chat-msg-others" type="friend" timestamp="1573458849">
                            <span routeurl="/im/h5/user/detail/380" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span> <div class="pop__chat-msg-content">
                                <!---->
                                <div class="pop__chat-msg-msg pop__chat-msg-picture"><span><img src="//demo.popoim.cn/upload/images/201911/115dc913a00030.jpg"></span></div>
                            </div> <!---->
                        </li>
                        <li class="pop__chat-msg-time"><span>11-11 16:05</span></li>
                        <li class="pop__chat-msg-me" type="friend" timestamp="1573459511">
                            <!----> <div class="pop__chat-msg-content"><!----> <div class="pop__chat-msg-msg pop__chat-msg-file"><span><div class="pop__chat-msg-file-cover">                         <i class="pop__chat-msg-icon">PNG</i>                      </div>                      <div class="pop__chat-msg-file-info">                          <span class="pop__chat-msg-file-name"><a href="https://demo.popoim.cn/upload/files/201911/115dc91637dc9d.png" download="fenxiao.png">fenxiao.png</a></span>                          <span class="pop__chat-msg-file-size">2.78&nbsp;KB</span>                      </div></span></div></div> <span routeurl="/im/h5/user/detail/379" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span>
                        </li>
                        <li class="pop__chat-msg-time"><span>11-14 10:34</span></li>
                        <li class="pop__chat-msg-me" type="friend" timestamp="1573698886">
                            <!----> <div class="pop__chat-msg-content"><!----> <div class="pop__chat-msg-msg pop__chat-msg-text"><span>111</span></div></div> <span routeurl="/im/h5/user/detail/379" class="pop__chat-msg-avatar"><img src="/static/h5/img/avatar.jpg"></span>
                        </li>
                        <div class="pop__chat-tap-menu" style="left: 0px; top: 0px; display: none;"><div class="pop__menu"><a href="javascript:void(0);"><i class="pop__icon-copy"></i>复制</a> <a href="javascript:void(0);" style="display: none;"><i class="pop__icon-revoke"></i>撤回</a></div></div>
                        <div class="pop__chat-voice-tip" style="display: none;"><div class="pop__line-scale-pulse-out" style="display: none;"><div></div> <div></div> <div></div> <div></div> <div></div></div> <div class="pop__cross" style="display: none;"></div> <div class=""></div></div>
                    </ul>
                </div>
            </div>
            <div class="pop__chat-tool-panel">
                <div class="pop__editor-panel pop__border-top pop__flexbox">
                    <i class="pop__btn pop__btn-voice" style=""></i> <i class="pop__btn pop__btn-keyboard" style="display: none;"></i> <input class="pop__chat-tool-editor pop__user-select" style="width: 4.34rem;">
                    <input type="button" value="按住 说话" class="pop__chat-tool-editor pop__none-user-select" style="width: 4.34rem; display: none;">
                    <i class="pop__btn pop__btn-emotion" style=""></i> <i class="pop__btn pop__btn-choose"></i>
                    <!---->
                </div> <div class="pop__choose-panel pop__border-top">
                    <div class="pop__emotion-wrapper" style="display: none;">
                        <div class="pop__emotion__cells pop__flexbox">
                            <div class="pop__emotion__cells-swiper pop__flex1">
                                <div id="pop__emotion" class="swiper-container">

                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide swiper-slide-active" style="width: 375px;">
                                            <div class="pop__face-list">
                                                <span><img class="face" src="/static/h5/img/emotion/face01/0.png" title="[表情0]"></span><span><img class="face" src="/static/h5/img/emotion/face01/1.png" title="[表情1]"></span><span><img class="face" src="/static/h5/img/emotion/face01/2.png" title="[表情2]"></span><span><img class="face" src="/static/h5/img/emotion/face01/3.png" title="[表情3]"></span><span><img class="face" src="/static/h5/img/emotion/face01/4.png" title="[表情4]"></span><span><img class="face" src="/static/h5/img/emotion/face01/5.png" title="[表情5]"></span><span>
                                                    <img class="face" src="/static/h5/img/emotion/face01/6.png" title="[表情6]">
                                                </span><span><img class="face" src="/static/h5/img/emotion/face01/7.png" title="[表情7]"></span><span>
                                                    <img class="face" src="/static/h5/img/emotion/face01/8.png" title="[表情8]">
                                                </span><span><img class="face" src="/static/h5/img/emotion/face01/9.png" title="[表情9]"></span><span><img class="face" src="/static/h5/img/emotion/face01/10.png" title="[表情10]"></span><span><img class="face" src="/static/h5/img/emotion/face01/11.png" title="[表情11]"></span><span><img class="face" src="/static/h5/img/emotion/face01/12.png" title="[表情12]"></span><span><img class="face" src="/static/h5/img/emotion/face01/13.png" title="[表情13]"></span><span><img class="face" src="/static/h5/img/emotion/face01/14.png" title="[表情14]"></span><span><img class="face" src="/static/h5/img/emotion/face01/15.png" title="[表情15]"></span><span><img class="face" src="/static/h5/img/emotion/face01/16.png" title="[表情16]"></span><span>
                                                    <img class="face" src="/static/h5/img/emotion/face01/17.png" title="[表情17]">
                                                </span><span><img class="face" src="/static/h5/img/emotion/face01/18.png" title="[表情18]"></span><span><img class="face" src="/static/h5/img/emotion/face01/19.png" title="[表情19]"></span><span><img class="face" src="/static/h5/img/emotion/face01/20.png" title="[表情20]"></span>
                                            </div>
                                        </div><div class="swiper-slide swiper-slide-next" style="width: 375px;">
                                            <div class="pop__face-list">
                                                <span><img class="face" src="/static/h5/img/emotion/face01/21.png" title="[表情21]"></span><span><img class="face" src="/static/h5/img/emotion/face01/22.png" title="[表情22]"></span><span><img class="face" src="/static/h5/img/emotion/face01/23.png" title="[表情23]"></span><span><img class="face" src="/static/h5/img/emotion/face01/24.png" title="[表情24]"></span><span><img class="face" src="/static/h5/img/emotion/face01/25.png" title="[表情25]"></span><span><img class="face" src="/static/h5/img/emotion/face01/26.png" title="[表情26]"></span><span><img class="face" src="/static/h5/img/emotion/face01/27.png" title="[表情27]"></span><span><img class="face" src="/static/h5/img/emotion/face01/28.png" title="[表情28]"></span><span>
                                                    <img class="face" src="/static/h5/img/emotion/face01/29.png" title="[表情29]">
                                                </span><span><img class="face" src="/static/h5/img/emotion/face01/30.png" title="[表情30]"></span><span><img class="face" src="/static/h5/img/emotion/face01/31.png" title="[表情31]"></span><span><img class="face" src="/static/h5/img/emotion/face01/32.png" title="[表情32]"></span><span><img class="face" src="/static/h5/img/emotion/face01/33.png" title="[表情33]"></span><span><img class="face" src="/static/h5/img/emotion/face01/34.png" title="[表情34]"></span><span><img class="face" src="/static/h5/img/emotion/face01/35.png" title="[表情35]"></span><span><img class="face" src="/static/h5/img/emotion/face01/36.png" title="[表情36]"></span><span><img class="face" src="/static/h5/img/emotion/face01/37.png" title="[表情37]"></span><span><img class="face" src="/static/h5/img/emotion/face01/38.png" title="[表情38]"></span><span><img class="face" src="/static/h5/img/emotion/face01/39.png" title="[表情39]"></span><span><img class="face" src="/static/h5/img/emotion/face01/40.png" title="[表情40]"></span><span><img class="face" src="/static/h5/img/emotion/face01/41.png" title="[表情41]"></span>
                                            </div>
                                        </div><div class="swiper-slide" style="width: 375px;">
                                            <div class="pop__face-list">
                                                <span><img class="face" src="/static/h5/img/emotion/face01/42.png" title="[表情42]"></span><span><img class="face" src="/static/h5/img/emotion/face01/43.png" title="[表情43]"></span><span><img class="face" src="/static/h5/img/emotion/face01/44.png" title="[表情44]"></span><span><img class="face" src="/static/h5/img/emotion/face01/45.png" title="[表情45]"></span><span><img class="face" src="/static/h5/img/emotion/face01/46.png" title="[表情46]"></span><span><img class="face" src="/static/h5/img/emotion/face01/47.png" title="[表情47]"></span><span><img class="face" src="/static/h5/img/emotion/face01/48.png" title="[表情48]"></span><span><img class="face" src="/static/h5/img/emotion/face01/49.png" title="[表情49]"></span><span><img class="face" src="/static/h5/img/emotion/face01/50.png" title="[表情50]"></span><span><img class="face" src="/static/h5/img/emotion/face01/51.png" title="[表情51]"></span><span><img class="face" src="/static/h5/img/emotion/face01/52.png" title="[表情52]"></span><span><img class="face" src="/static/h5/img/emotion/face01/53.png" title="[表情53]"></span><span><img class="face" src="/static/h5/img/emotion/face01/54.png" title="[表情54]"></span><span><img class="face" src="/static/h5/img/emotion/face01/55.png" title="[表情55]"></span><span>
                                                    <img class="face" src="/static/h5/img/emotion/face01/56.png" title="[表情56]">
                                                </span><span><img class="face" src="/static/h5/img/emotion/face01/57.png" title="[表情57]"></span><span><img class="face" src="/static/h5/img/emotion/face01/58.png" title="[表情58]"></span><span><img class="face" src="/static/h5/img/emotion/face01/59.png" title="[表情59]"></span><span><img class="face" src="/static/h5/img/emotion/face01/60.png" title="[表情60]"></span><span><img class="face" src="/static/h5/img/emotion/face01/61.png" title="[表情61]"></span><span><img class="face" src="/static/h5/img/emotion/face01/62.png" title="[表情62]"></span>
                                            </div>
                                        </div><div class="swiper-slide" style="width: 375px;">
                                            <div class="pop__face-list">
                                                <span><img class="face" src="/static/h5/img/emotion/face01/63.png" title="[表情63]"></span><span><img class="face" src="/static/h5/img/emotion/face01/64.png" title="[表情64]"></span><span><img class="face" src="/static/h5/img/emotion/face01/65.png" title="[表情65]"></span><span><img class="face" src="/static/h5/img/emotion/face01/66.png" title="[表情66]"></span><span><img class="face" src="/static/h5/img/emotion/face01/67.png" title="[表情67]"></span><span><img class="face" src="/static/h5/img/emotion/face01/68.png" title="[表情68]"></span><span><img class="face" src="/static/h5/img/emotion/face01/69.png" title="[表情69]"></span>
                                                <span><img class="face" src="/static/h5/img/emotion/face01/70.png" title="[表情70]"></span><span><img class="face" src="/static/h5/img/emotion/face01/71.png" title="[表情71]"></span><span><img class="face" src="/static/h5/img/emotion/face01/72.png" title="[表情72]"></span><span><img class="face" src="/static/h5/img/emotion/face01/73.png" title="[表情73]"></span><span><img class="face" src="/static/h5/img/emotion/face01/74.png" title="[表情74]"></span><span><img class="face" src="/static/h5/img/emotion/face01/75.png" title="[表情75]"></span><span><img class="face" src="/static/h5/img/emotion/face01/76.png" title="[表情76]"></span><span><img class="face" src="/static/h5/img/emotion/face01/77.png" title="[表情77]"></span><span><img class="face" src="/static/h5/img/emotion/face01/78.png" title="[表情78]"></span><span><img class="face" src="/static/h5/img/emotion/face01/79.png" title="[表情79]"></span><span><img class="face" src="/static/h5/img/emotion/face01/80.png" title="[表情80]"></span><span><img class="face" src="/static/h5/img/emotion/face01/81.png" title="[表情81]"></span><span><img class="face" src="/static/h5/img/emotion/face01/82.png" title="[表情82]"></span><span><img class="face" src="/static/h5/img/emotion/face01/83.png" title="[表情83]"></span>
                                            </div>
                                        </div><div class="swiper-slide" style="width: 375px;">
                                            <div class="pop__face-list">
                                                <span>
                                                    <img class="face" src="/static/h5/img/emotion/face01/84.png" title="[表情84]">
                                                </span><span><img class="face" src="/static/h5/img/emotion/face01/85.png" title="[表情85]"></span><span><img class="face" src="/static/h5/img/emotion/face01/86.png" title="[表情86]"></span><span><img class="face" src="/static/h5/img/emotion/face01/87.png" title="[表情87]"></span><span><img class="face" src="/static/h5/img/emotion/face01/88.png" title="[表情88]"></span><span><img class="face" src="/static/h5/img/emotion/face01/89.png" title="[表情89]"></span><span><img class="face" src="/static/h5/img/emotion/face01/90.png" title="[表情90]"></span><span><img class="face" src="/static/h5/img/emotion/face01/91.png" title="[表情91]"></span><span><img class="face" src="/static/h5/img/emotion/face01/92.png" title="[表情92]"></span><span><img class="face" src="/static/h5/img/emotion/face01/93.png" title="[表情93]"></span><span><img class="face" src="/static/h5/img/emotion/face01/94.png" title="[表情94]"></span><span><img class="face" src="/static/h5/img/emotion/face01/95.png" title="[表情95]"></span><span><img class="face" src="/static/h5/img/emotion/face01/96.png" title="[表情96]"></span><span><img class="face" src="/static/h5/img/emotion/face01/97.png" title="[表情97]"></span><span><img class="face" src="/static/h5/img/emotion/face01/98.png" title="[表情98]"></span><span>
                                                    <img class="face" src="/static/h5/img/emotion/face01/99.png" title="[表情99]">
                                                </span><span><img class="face" src="/static/h5/img/emotion/face01/100.png" title="[表情100]"></span>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="pop__emotion-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div>

                                </div>
                            </div>
                        </div>
                    </div>
                 <div class="pop__choose-wrapper" style="display: none;">
                        <ul class="pop__clearfix">
                            <li style="">
                                <a href="javascript:;">
                                    <span class="pop__avatar">
                                        <i class="layui-icon layui-icon-image"></i>
                                        <form><input type="file" accept="image/*"></form>
                                    </span><em>照片</em>
                                </a>
                            </li>
                            <li style="">
                                <a href="javascript:;">
                                    <span class="pop__avatar">
                                        <i class="layui-icon"></i>
                                        <form><input type="file" accept="*"></form>
                                    </span><em>文件</em>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 所有群组 -->
    <div id="group_list" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__main-page pop__flexbox">
            <div class="pop__header"><div class="pop__header-wrapper pop__flexbox"><a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a> <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>所有群聊</h2> <em class="pop__placeholder"></em></div></div>
            <div class="pop__body">
                <div class="pop__scrolling-panel">
                    <div class="pop__friend-list">
                        <ul class="pop__clearfix">
                            <li>
                                <div routeurl="/im/h5/group/create" class="pop__row pop__flexbox pop__flex-align-center pop__cell" style="">
                                    <img src="/static/h5/img/icon__create-group.png" class="pop__avatar-small"><span class="pop__flex1">创建群聊</span>
                                </div> <h2></h2>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 图片预览弹窗 -->
    <div class="pop__img-view" style="display: none;">
        <div class="swiper-container pop__img-view-container">
            <div class="swiper-wrapper"></div>
        </div>
    </div>

    <!-- 视频播放 -->
    <div class="pop__video-view" style="display: none;">
        <i class="pop__close"></i>
        <video id="pop__video" width="100%" height="100%" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="" preload="auto"></video>
    </div>

    <!-- 用户信息详情 -->
    <div id="user_detail" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__main-page pop__flexbox" >
            <div class="pop__header"><div class="pop__header-wrapper pop__flexbox"><a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a> <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>详细资料</h2> <em class="pop__placeholder"></em></div></div> <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li><div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell"><img src="https://demo.popoim.cn/im/h5" class="pop__avatar"> <label class="pop__detail-item-left pop__flex1"><em></em><i style="display: none;"></i><i></i></label></div></li>
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell"><span class="pop__detail-item-left">个性签名</span> <span class="pop__flex1 section"></span></div> <div routeurl="/im/h5/friend/remark/0" class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell" style="display: none;">
                            <span class="pop__detail-item-left pop__flex1">
                                设置备注
                            </span> <div class="pop__arr"></div>
                        </div>
                    </li>
                    <li><!----></li>
                </ul>
            </div> <div class="pop__btns-panel"><a href="https://demo.popoim.cn/im/h5/friend/send_apply/0" class="pop__btn-primary" style="display: none;">发起好友申请</a> <a href="javascript:;" class="pop__btn-primary" style="display: none;">发消息</a> <a href="javascript:;" class="pop__btn-warning" style="display: none;">删除好友</a></div>
        </div>
    </div>

    <!-- 我的信息详情 -->
    <div id="mine_detail" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__main-page pop__flexbox">
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a>
                    <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>个人信息</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div> <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div routeurl="/im/h5/setting/avatar" class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <label class="pop__detail-item-left pop__flex1">头像</label>
                            <img class="pop__avatar" src="/static/h5/img/avatar.jpg"> <div class="pop__arr"></div>
                        </div>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <label class="pop__detail-item-left pop__flex1">泡泡IM号</label>
                            <div class="pop__detail-item-right">wh2006</div>
                        </div> <div routeurl="/im/h5/setting/nickname" class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <label class="pop__detail-item-left pop__flex1">昵称</label> <div class="pop__detail-item-right">wh2006</div> <div class="pop__arr"></div>
                        </div>
                        <div routeurl="/im/h5/setting/sign" class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <label class="pop__detail-item-left pop__flex1">个性签名</label>
                            <div class="pop__detail-item-right">wh2006</div> <div class="pop__arr"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 群组详情 -->
    <div id="group_detail" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__main-page pop__flexbox">
            <div class="pop__header"><div class="pop__header-wrapper pop__flexbox"><a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a> <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>详细资料</h2> <em class="pop__placeholder"></em></div></div> <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-wrap pop__flex-align-center pop__cell">
                            <div routeurl="/im/h5/group/memberadd/0" class="pop__avatar"><div class="pop__operation-adduser pop__operation-icon"></div></div> <!----> <div routeurl="/im/h5/group/members/0" class="pop__more-item pop__flex1 pop__flexbox pop__flex-align-center pop__flex-justify-center pop__cell">
                                <div class="pop__more">
                                    <span>
                                        查看更多群成员
                                    </span> <span class="pop__arr"></span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div routeurl="/im/h5/group/remark/0" class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <span class="pop__detail-item-left">
                                备注名称
                            </span> <span class="pop__detail-section pop__flex1"></span> <div class="pop__arr"></div>
                        </div>
                    </li>
                    <li style="display: none;">
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <span class="pop__flex1">全员禁言</span>
                            <div class="pop__input-block"><input type="checkbox"> <div class="pop__unselect pop__form-switch"><em>OFF</em><i></i></div></div>
                        </div>
                    </li>
                </ul>
            </div> <div class="pop__btns-panel"><a href="javascript:;" class="pop__btn-warning">删除并退出</a> <!----></div>
        </div>
    </div>

    <!-- 群组成员 -->
    <div id="group_members" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__main-page pop__flexbox">
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a>
                    <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>群成员</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div>
            <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-wrap pop__flex-align-center pop__cell">
                            <div class="pop__more-item pop__flex1 pop__flexbox pop__flex-align-center pop__flex-justify-center pop__cell">
                                <div class="pop__more">
                                    <span>
                                        加载更多
                                    </span> <span class="pop__arr" style=""></span> <i class="pop__loading pop__loading-head" style="display: none;"></i>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 好友申请详情 -->
    <div id="apply_detail" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__main-page pop__flexbox">
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a>
                    <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>详细资料</h2>
                    <em class="pop__placeholder"></em>
                </div>
            </div> <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <img src="https://demo.popoim.cn/im/h5" class="pop__avatar">
                            <label class="pop__detail-item-left pop__flex1"><em></em><i></i></label>
                        </div>
                    </li>
                    <li>
                        <div class="pop__detail-item pop__flexbox pop__flex-align-center pop__cell">
                            <label class="pop__detail-item-left">附言:</label>
                            <div class="pop__detail-item-right"></div>
                        </div>
                    </li>
                </ul>
            </div> <div class="pop__btns-panel"><!----> <!----></div>
        </div>
    </div>

    <!-- 登录页面 -->
    <div id="login" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__form-cells">
            <h2 class="pop__form-title">登录泡泡IM</h2>
            <form action="https://demo.popoim.cn/im/post">
                <div class="pop__form-cell">
                    <div><label class="pop__form-label">账号</label></div>
                    <div class="pop__flex1"><input name="username" type="text" placeholder="请输入账号" class="pop__form-input"></div>
                </div> <div class="pop__form-cell">
                    <div><label class="pop__form-label">密码</label></div> <div class="pop__flex1">
                        <input name="password" type="password" placeholder="请输入密码" class="pop__form-input">
                    </div>
                </div> <!----> <div class="pop__form-link" style=""><a href="https://demo.popoim.cn/im/h5/user/join">注册账号</a></div>
                <div class="pop__form-btn"><a href="javascript:;" class="pop__btn-primary btn__login">登录</a></div>
            </form>
        </div>
    </div>

    <!-- 注册页面 -->
    <div id="join" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__form-cells">
            <h2 class="pop__form-title">注册泡泡IM</h2>
            <form action="https://demo.popoim.cn/im/post">
                <div class="pop__form-cell">
                    <div><label class="pop__form-label">账号</label></div> <div class="pop__flex1">
                        <input name="username" type="text" placeholder="请输入账号，字母及数字的组合" class="pop__form-input">
                    </div>
                </div> <div class="pop__form-cell">
                    <div><label class="pop__form-label">密码</label></div> <div class="pop__flex1">
                        <input name="password" type="password" placeholder="请输入密码" class="pop__form-input">
                    </div>
                </div> <div class="pop__form-cell"><div><label class="pop__form-label">昵称</label></div> <div class="pop__flex1"><input name="nickname" type="text" placeholder="请输入昵称" class="pop__form-input"></div></div> <div class="pop__form-cell"><div><label class="pop__form-label">个性签名</label></div> <div class="pop__flex1"><input name="sign" type="text" placeholder="请输入个性签名" class="pop__form-input"></div></div> <!----> <div class="pop__form-link"><a href="https://demo.popoim.cn/im/h5/user/login">已经有账号，点击这里登录</a></div>
                <div class="pop__form-btn"><a href="javascript:;" class="pop__btn-primary btn__login">注册</a></div>
            </form>
        </div>
    </div>

    <!-- 加好友发送附言，设置备注等 -->
    <div id="setting" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__header">
            <div class="pop__header-wrapper pop__flexbox"><a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a> 
            <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>设置</h2> <em class="pop__confirm-button">
                <a href="javascript:;" class="pop__btn-primary-mini">确定</a></em></div>
        </div> <div class="pop__main-page pop__flexbox">
            <div class="pop__flex1">
                <div class="pop__gray-text"></div> 
                <ul class="pop__clearfix">
                    <li><label class="pop__flexbox"><input type="text" class="pop__input pop__flex1"></label></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 添加朋友 -->
    <div id="search" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__header">
            <div class="pop__header-wrapper pop__flexbox">
                <a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a> <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>添加朋友</h2> <em class="pop__placeholder"></em>
            </div>
        </div> <div class="pop__scrolling-panel">
            <div class="pop__friend-list">
                <ul class="pop__clearfix">
                    <li><div class="pop__search-bar"><div class="pop__search-bar-form"><div class="pop__search-bar-box"><i class="pop__icon-search"></i> <input type="text" pop__placeholder="输入对方账号" required="required" class="pop__search-bar-input"> <a href="javascript:" class="pop__icon-clear"></a></div> <label class="pop__search-bar-label"><i class="pop__icon-search"></i> <span>输入对方账号</span></label></div> <a href="javascript:" class="pop__search-bar-cancel-btn">取消</a></div></li>
                    <li></li>
                    <li style="display: none;">
                        <div class="pop__row pop__flexbox pop__flex-align-center pop__cell">
                            <img src="/static/h5/img/search-text.png" class="pop__avatar-small">
                            <span class="pop__flex1"><b>搜索</b>：<span class="pop__green"></span></span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 群成员操作 -->
    <div id="group_member_operation" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__header">
            <div class="pop__header-wrapper pop__flexbox">
                <a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a>
                <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>选择联系人</h2> <em class="pop__confirm-button-fixed"><button disabled="disabled" class="pop__btn-primary-mini">完成</button></em>
            </div>
        </div> <div class="pop__body">
            <div class="pop__scrolling-panel">
                <div class="pop__friend-list">
                    <ul class="pop__clearfix pop__cells_checkbox">
                        <li>
                            <form></form>
                        </li>
                    </ul>
                </div>
            </div> <div class="pop__friend-list-showletter">A</div> <div class="pop__friend-list-floatletter">
                <em>A</em><em>B</em><em>C</em><em>D</em><em>E</em><em>F</em><em>G</em><em>H</em><em>I</em><em>J</em><em>K</em><em>L</em><em>M</em><em>N</em>
                <em>O</em><em>P</em><em>Q</em><em>R</em><em>S</em><em>T</em><em>U</em><em>V</em><em>W</em><em>X</em><em>Y</em><em>Z</em><em>#</em>
            </div>
        </div>
    </div>

    <!-- 群内禁言 -->
    <div id="forbidden" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__header"><div class="pop__header-wrapper pop__flexbox"><a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a>
             <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>选择禁言时长</h2> <em class="pop__confirm-button">
            <button disabled="disabled" class="pop__btn-primary-mini">完成</button></em></div></div> <div class="pop__scrolling-panel">
            <div class="pop__friend-list">
                <ul class="pop__clearfix pop__cells_checkbox">
                    <li>
                        <form>
                            <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" value="-1" class="pop__check"> <i class="pop__icon-checked"></i>解除禁言
                            </label> <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" value="600" class="pop__check"> <i class="pop__icon-checked"></i>10分钟
                            </label> <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" value="3600" class="pop__check"> <i class="pop__icon-checked"></i>1小时
                            </label> <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" value="43200" class="pop__check"> <i class="pop__icon-checked"></i>12小时
                            </label> <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" value="86400" class="pop__check"> <i class="pop__icon-checked"></i>1天
                            </label> <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" value="259200" class="pop__check"> <i class="pop__icon-checked"></i>3天
                            </label> <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" value="604800" class="pop__check"> <i class="pop__icon-checked"></i>7天
                            </label> <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" value="1296000" class="pop__check"> <i class="pop__icon-checked"></i>15天
                            </label> <label class="pop__row pop__flexbox pop__check-label">
                                <input type="radio" value="2592000" class="pop__check"> <i class="pop__icon-checked"></i>30天
                            </label>
                        </form>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 头像设置 -->
    <div id="set_avatar" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__main-page pop__flexbox">
            <div class="pop__header">
                <div class="pop__header-wrapper pop__flexbox">
                    <a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a>
                    <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>个人头像</h2> 
                    <a class="pop__dot-more"><form><input type="file" accept="image/*" class="pop__input-choose-avatar"></form></a>
                </div>
            </div> <div class="pop__center"><img class="pop__avatar" src="/static/h5/img/avatar.jpg"></div>
        </div>
    </div>

    <!-- 设置相关 -->
    <div id="setting_others" class="pop__panel pop__clearfix" style="display: none;">
        <div class="pop__main-page pop__flexbox">
            <div class="pop__header"><div class="pop__header-wrapper pop__flexbox"><a href="javascript:;" onclick="history.back(-1);" class="pop__header-back"></a> <h2 class="pop__header-title pop__flex1"><i class="pop__loading pop__loading-head" style="display: none;"></i>设置</h2> <em class="pop__placeholder"></em></div></div> <div class="pop__detail-panel">
                <ul class="pop__clearfix">
                    <li>
                        <div class="pop__detail-item pop__margin-top pop__text-center pop__input"><label class="pop__detail-item-left pop__flex1">退出</label></div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 提示框 -->
    <div id="dialog" class="pop__panel" style="display: none;">
        <div class="pop__mask"></div> <div class="pop__dialog">
            <div class="pop__dialog__bd"></div>
            <div class="pop__dialog__ft">
                <a href="javascript:;" class="pop__dialog__btn pop__dialog__btn_primary">知道了</a>
                <a href="javascript:;" class="pop__dialog__btn pop__dialog__btn_default" style="display: none;">取消</a>
                <a href="javascript:;" class="pop__dialog__btn pop__dialog__btn_primary" style="display: none;">确定</a>
            </div>
        </div>
    </div>

    <!-- 操作提示 -->
    <div id="actionsheet" class="pop__panel">
        <div class="pop__mask" style="display: none;"></div> <div class="pop__actionsheet">
            <div class="pop__actionsheet__title">
                <p class="pop__actionsheet__title-text"></p>
            </div> <div class="pop__actionsheet__menu"><div class="pop__actionsheet__cell">确认</div></div>
            <div class="pop__actionsheet__action"><div class="pop__actionsheet__cell">取消</div></div>
        </div>
    </div>

    <div id="toast" class="pop__panel" style="display: none;"><div class="pop__toast"><i class="pop__icon_toast"></i> 
        <p class="pop__toast__content">提交中...</p></div></div>

    <script src="/static/h5/js/recorder.js"></script>
    <script src="/static/h5/js/swiper-3.4.1.min.js"></script>
    <script src="/static/h5/js/zepto.min.js"></script>
    <script src="/static/h5/js/page.min.js"></script>
    <script src="/static/h5/js/vue.min.js"></script>
    <script src="/static/h5/js/fontSize.js"></script>
    <script src="/static/h5/js/woker/woker.js"></script>
    <script src="/static/h5/js/pop_function.js"></script>
    <script src="/static/h5/js/h5.min.js"></script>

    <script>
        (function () {
            var src = '/static/h5/js/eruda.min.js';
            if (!/debug/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
            document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
            document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
        })();
        $(function () {
            var js = document.createElement("script");
            js.src = "/static/h5/js/swiper-3.4.1.min.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(js, s);
        });
        $(function () {
            var style = document.createElement("link");
            style.href = '/static/h5/css/swiper-3.4.1.min.css';
            style.rel = 'stylesheet';
            style.type = 'text/css';
            var s = document.getElementsByTagName("link")[0];
            s.parentNode.insertBefore(style, s);
        });
        $(function () {
            var js = document.createElement("script");
            js.src = "/static/h5/js/recorder.js";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(js, s);
        });

    </script>



    <script type="text/javascript" src="/static/h5/js/jquery.js"></script>
    <script type="text/javascript" src="/static/h5/js/entry.js"></script>
</body>
</html>